import React from 'react';


export default class bind_fei extends React.Component{
  // getInitialState:function(){  //这种开发模式，是不能用这个的，需要用constructor，constructor必须先执行super，初始值在constructor里面设置
  //   return{
  //       username:'',
  //       gender:'man',
  //       checked:true
  //   }
  //  }
   constructor(props){
     super(props);
     this.state={
       username:'',
       checked:true,
       gender:'woman'
     }
   }
   handleChange(name,event){
    //  console.log('event,name: ', event,name);
    // 这里顺序不可以调换，vue是默认是$event, react是最后一个,也就是默认会有一个event ,但是是在最后
      var newState={}
      newState[name]=name=='checked'?event.target.checked:event.target.value;
      this.setState(
        newState
      )
      console.log(newState)
   }
   submitHandler(e){
     e.preventDefault();
     var is = this.state.checked?'是':'不是';
    var gender= this.state.gender == "man" ? "帅哥":"美女";
    alert(this.state.username+ is + gender +'.' );
     console.log(123);
   }
   render(){
     return(
       <from onSubmit={this.submitHandler}>
          <label htmlFor="username">请输入姓名</label>
          <input type='text' name='username' value={this.state.username} onChange={this.handleChange.bind(this,'username')} id='username'/><br/>

          <label htmlFor="checkbox">是或否:</label>
          <input type='checkbox' value='是否' checked={this.state.checked} onChange={this.handleChange.bind(this,'checked')} name='checkbox'  id='checkbox'/><br/>

          <label >请选择:</label>
          <select name='gender' value={this.state.gender} onChange={this.handleChange.bind(this,'gender')}>
            <option value='man'>帅哥</option>
            <option value='woman'>美女</option>
          </select><br/>

          <button type='submit' onClick={this.submitHandler.bind(this)}>提交</button>
       </from>
     )
   }
}

/**
 * bind复用
 *     bind方法为事件相应函数增加一个参数，事件响应函数通过该参数识别事件源。
 *
 * 表单组件可以通过设置onChange()回调函数来监听组件变化。当用户的交互行文导致一下变化时，onChange()被执行并通过浏览器做出响应。

  <input>或<textarea>的value发生变化。
  <input>的checked状态改变。
  <option>的selected 状态改变。


  例子中，from加onSubmit方法，是没有调用的，无奈在button里面用onClick调用了，原因暂时未知道

  所有的方法调用，都需要用到bind，要把this传过去
 * */
